<template>
  <div class="props-item" style="min-height: 50px;">
    <template v-if="simpleMode">
      <div class="row justify-between">
        <div class="left">
          <div style="padding-left: 5px;" class="text-grey-9 text-bold text-subtitle1">{{p.label_cn || p.desc_cn}}</div>
        </div>
        <div class="right flex items-center">
          <q-btn icon="cancel" color="blue-grey-6" flat dense round size="sm" @click="delete option[k]"></q-btn>
        </div>
      </div>
      <div style="padding-left: 5px;" class="q-py-sm">
        <q-select dense filled v-if="p.values?.length && calType(p, k) !== '@computed'" v-model="option[k]" :options="p.values"></q-select>
        <template v-else>
          <div class="row nowrap" v-if="calType(p, k) === 'Boolean'">
            <q-toggle class="q-pr-md" dense filled v-model="option[k]"></q-toggle>
            <q-input dense filled v-model="option[k]"></q-input>
          </div>
          <q-input dense filled v-if="calType(p, k) === 'String'" v-model="option[k]"></q-input>
          <q-input dense filled v-if="calType(p, k) === 'Number'" v-model.number="option[k]" type="number"></q-input>
        </template>
      </div>
    </template>
    <template v-else>
      <div class="row justify-between">
        <div class="left">
          <q-chip dense color="primary" text-color="white" square>{{k}}</q-chip>
          <span class="text-grey-6" style="font-size: 12px;">{{p.type.toString()}}</span>
        </div>
        <div class="right flex items-center">
          <q-btn v-if="p.extension" icon="extension" color="blue-grey-6" flat dense round size="sm" @click="openExtension"></q-btn>
          <q-btn icon="data_object" color="blue-grey-6" flat dense round size="sm" @click="openFuncEditor"></q-btn>
          <q-btn icon="cancel" color="blue-grey-6" flat dense round size="sm" @click="delete option[k]"></q-btn>
        </div>
      </div>
      <div style="padding-left: 5px;" class="text-grey-9">描述：{{p.desc_cn}}</div>
      <div style="padding-left: 5px;" v-if="p.default">默认值：{{p.default}}</div>
      <div style="padding-left: 5px;" class="q-py-sm">
        <q-select dense filled v-if="p.values?.length && calType(p, k) !== '@computed'" v-model="option[k]" :options="p.values"></q-select>
        <template v-else>
          <div class="row nowrap" v-if="calType(p, k) === 'Boolean'">
            <q-toggle class="q-pr-md" dense filled v-model="option[k]"></q-toggle>
            <q-input dense filled v-model="option[k]"></q-input>
          </div>
          <q-input dense filled v-if="calType(p, k) === 'String'" v-model="option[k]"></q-input>
          <q-input dense filled v-if="calType(p, k) === 'Number'" v-model.number="option[k]" type="number"></q-input>
        </template>
      </div>
    </template>
    <PresetDialog ref="dialog" v-bind="dialogProps" v-model="showDialog"></PresetDialog>
  </div>
</template>

<script setup>
import { type } from 'ramda'
import {inject, ref} from "vue"
import PresetDialog from "../components/PresetDialog/index.vue"
import FunctionCreator from '../FunctionCreator/index.vue'
import {kebabCaseToCamelCase, kebabCaseToPascalCase} from "../common/util.js"

const props = defineProps({
  k: String,
  p: Object,
  option: Object
})

const typeMap = ref({})
const simpleMode = inject('simpleMode')
function calType(p, key) {
  if(typeMap[key]) return typeMap[key]
  if(props.option.hasOwnProperty(key)) {
    if(props.option[key]['@computed']) {
      return '@computed'
    }else  {
      return type(props.option[key])
    }
  }else {
    if(type(p.type) === 'String') {
      return p.type
    }
    if(type(p.type) === 'Array') {
      return p.type[0]
    }
  }
}

const dialogProps = ref({})
const dialog = ref({})
const showDialog = ref(false)
const onOk = (e) => {
  let propName = kebabCaseToCamelCase(props.k)
  props.option[propName] = e.contentRef.funcCfg
  showDialog.value = false
}
function openFuncEditor() {
  let propName = kebabCaseToCamelCase(props.k)
  dialogProps.value = {
    title: '函数编辑器',
    component: FunctionCreator,
    cardProps: {
      style: { height: '70%', width: '800px'},
    },
    contentProps: {
      cfg: props.option[propName] || {}
    }
  }
  showDialog.value = true
}
</script>

<style scoped>
.props-item {
  width: 100%;
}
</style>
